<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<body>
<form>
	<h1>choose:</h1>
	<p><label><input type="checkbox" name="">篮球</label></p>
	<p><label><input type="checkbox" name="">足球</label></p>
	<p><label><input type="checkbox" name="">乒乓球</label></p>
	<p><label><input type="checkbox" name="">羽毛球</label></p>
	<p><label><input type="checkbox" name="">篮球</label></p>
	<p><label><input type="checkbox" name="">篮球</label></p>
	<p><label><input type="checkbox" name="">篮球</label></p>
</form>
<p>
	<button id='all'>全选</button>
	<button id='notall'>全不选</button>
	<button id='uall'>反选</button>
	<button id='ok'>ok</button>
</p>
<hr>
<div class="info">
	
</div>
</body>
<script type="text/javascript">
$('#all').click(function(){
	$(':checkbox').attr({'checked':true});
});

$('#notall').click(function(){
	$(':checkbox').attr({'checked':false});
});

$('#uall').click(function(){
$(':checkbox').each(function(){
	this.checked!=this.checked;
});
});
$('#ok').click(function(){
	$(':checked').parent().parent().appendTo('.info');
})


</script>
</html>